﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>达内知道登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="css/login.css" >
</head>
<body class="bg-light">
<div class="container-fluid" id="loginApp">
    <div class="row">
        <div class="mx-auto mt-5" style="width: 400px;">
            <h2 class="text-center "><b>达内</b>·知道</h2>
            <div class="bg-white p-4">
                <p class="text-center">用户登录</p>
                <div id="error" class="alert alert-danger d-none">
                    <i class="fa fa-exclamation-triangle"></i> 账号或密码错误
                </div>
                <div id="logout" class="alert alert-info d-none">
                    <i class="fa fa-exclamation-triangle"></i> 已经登出系统
                </div>
                <div id="register" class="alert alert-info d-none">
                    <i class="fa fa-exclamation-triangle"></i> 已经成功注册，请登录。
                </div>
                <form action="/login" method="post"
                      @submit.prevent="login">
                    <div class="form-group has-icon">
                        <input type="text" class="form-control d-inline"
                               name="username" placeholder="手机号"
                               v-model="username">
                        <span class="fa fa-phone form-control-icon"></span>
                    </div>
                    <div class="form-group has-icon">
                        <input type="password" class="form-control"
                               name="password" placeholder="密码"
                               v-model="password">
                        <span class="fa fa-lock form-control-icon"></span>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block ">登录</button>
                </form>
                <a class="d-block mt-1" href="resetpassword.html" >忘记密码？</a>
                <a class="d-block mt-1" href="register.html"  >新用户注册</a>
            </div>
        </div>
    </div>
</div>
<script src="bower_components/jquery/dist/jquery.js" ></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js" ></script>
<script src="bower_components/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    if (location.search == "?error"){
        $("#error").removeClass("d-none");
    }
    if (location.search == "?logout"){
        $("#logout").removeClass("d-none");
    }
    if (location.search == "?register"){
        $("#register").removeClass("d-none");
    }
    let loginApp=new Vue({
        el:"#loginApp",
        data:{
            username:"",
            password:""
        },
        methods:{
            login:function(){
                let form=new FormData();
                form.append("client_id","knows");
                form.append("client_secret","123456");
                form.append("username",this.username);
                form.append("password",this.password);
                form.append("grant_type","password");
                axios({
                    url:"http://localhost:9000/oauth/token",
                    method:"post",
                    data:form
                }).then(function(response){
                    //alert(response.data.access_token);
                    // 将jwt保存在localStorage中
                    // localStorage使用方便,相当于浏览器自带的一个map
                    window.localStorage.setItem(
                        "accessToken",response.data.access_token);
                    // 登录成功,跳转到首页
                    location.href="/index.html";
                }).catch(function(error){
                    console.log(error);
                })
            }
        }
    })



</script>
</body>
</html>
